<template>
  <!-- 检查合格(合格) -->
  <div class="detailsGooverModal" style="position: relative">
    <div class="details-content">
      <top-title :updateTime="false" :content="content" :titleColor="'#1388FF'"></top-title>
      <div class="add-btn cursor" @click="$router.go(-1)" style="right: 1.1rem">返回</div>
      <div class="add-btn cursor" @click="downloadHandle()" v-has="'goover:down'">下载PDF</div>

      <div class="details-table detailModal" style="margin-top: 20px">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">企业信息</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位名称</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.companyMessageName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.companyMessageName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">所属行业</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.industryInformationName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.industryInformationName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">统一社会信用代码</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.companyCreditCode || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.companyCreditCode || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">责任民警</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.companyPoliceUserName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.companyPoliceUserName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">企业法人</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.companyLegalPersonName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.companyLegalPersonName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">法人联系方式</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.companyLegalMobile || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.companyLegalMobile || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div>
            <div class="info-wrap f1">
              <div class="label common-lable">营业地址</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.companyAddressDetail || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.companyAddressDetail || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">检查信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="f1">
              <div class="info-wrap f1">
                <div class="label common-lable">检查民警</div>
                <div class="value common-value">{{ policeCheckTaskInfo.policeUserName || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">警号</div>
                <div class="value common-value">{{ policeCheckTaskInfo.policeUserNo || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">检查类型</div>
                <div class="value common-value">{{ policeCheckTaskInfo.industryExamineName || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">检查/复查</div>
                <div class="value common-value">
                  {{ policeCheckTaskInfo.checkType == 1 ? '检查' : '复查' || '暂无' }}
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">检查时间</div>
                <div class="value common-value">{{ policeCheckTaskInfo.checkTime || '暂无' }}</div>
              </div>
            </div>
            <div class="police-wrap f1">
              <div class="label common-lable">民警签到图</div>
              <!-- @click="imgDetail(imgPrefix + policeCheckTaskInfo.signPicture)" -->
              <div class="value common-value" @click="showImg(policeCheckTaskInfo.signPicture)">
                <img
                  class="cusImg"
                  :id="`${policeCheckTaskInfo.signPicture}`"
                  :src="`${imgPrefix + policeCheckTaskInfo.signPicture}`"
                  :data-original="`${imgPrefix + policeCheckTaskInfo.signPicture}`"
                />
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="f1">
              <div class="sign-wrap f1">
                <div class="label common-lable">检查结果</div>
                <div class="value common-value" style="padding-left: 16px">
                  {{ policeCheckTaskInfo.checkResultName || '暂无' }}
                </div>
              </div>
            </div>
            <div class="sign-wrap f1">
              <div class="label common-lable">责任人签名</div>
              <div class="value common-value" style="background-color: #d3d3d3">
                <img :src="`${imgPrefix + policeCheckTaskInfo.principalSignatureUrl}`" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <img-show ref="imgShow"></img-show>
  </div>
</template>

<script>
import { checkTaskRecord } from '@/api/goover'
import { findEnableDictItemsbyCode } from '@/api/api'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import topTitle from '@/components/topTitle'
import imgShow from '@/components/imgShow'

export default {
  name: 'detailsGooverModal',
  components: { topTitle, imgShow },
  data() {
    return {
      content: [['检查记录'], ['检查详情']],
      imgPrefix: '',
      policeCheckTaskInfo: {},
      params: {},
    }
  },
  created() {
    this.getImagePrefix()
  },
  mounted() {
    if (this.$route.query.records && typeof this.$route.query.records === 'object') {
      this.params = this.$route.query.records
      localStorage.setItem('detailsGooverData', JSON.stringify(this.params)) // 持久化储存 刷新使用
    } else {
      this.params = JSON.parse(localStorage.getItem('detailsGooverData'))
    }

    this.getDetailList()
  },
  methods: {
    imgDetail(pic) {
      this.$refs.imgShow.show({ type: 'img', src: pic })
    },
    showImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },
    downloadHandle() {
      this.$router.push({ path: '/goover/modules/qualifiedPdf' })
    },
    getDetailList() {
      checkTaskRecord({ taskId: this.params.id }).then((res) => {
        let { policeCheckTaskInfo } = res.result
        this.policeCheckTaskInfo = policeCheckTaskInfo
      })
    },
    getImagePrefix() {
      findEnableDictItemsbyCode({ code: 'static_server' }).then((res) => {
        this.imgPrefix = res.result[0].value
      })
    },
  },
}
</script>
<style scoped lang="less">
.detailsGooverModal {
  flex: 1;
  min-height: 100%;
  background: var(--theme-content-bg);

  .details-content {
    position: relative;
    margin: 0 auto;
    width: 11rem;
    min-width: 865px;

    background: var(--theme-container-bg);

    .add-btn {
      top: 0.06rem;
      right: 0;
    }

    .details-table {
      margin: 0 0.2rem;
      margin-top: 20px;
      color: #fff;
    }
  }

  .cusImg {
    object-fit: cover;
    cursor: pointer;
  }
}
</style>
